<template>
  <Modal
      v-model="visible"
      title="上传资源"
      width="600"
      :mask-closable="false">
    <Form ref="uploadForm" :model="formData">
      <FormItem label="所属分组" prop="groupId">
        <Select v-model="formData.groupId" clearable>
          <Option v-for="item in resourceGroupList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Upload ref="upload"
                type="drag"
                multiple
                :action="uploadAction"
                :headers="{Authorization: token}"
                :data="formData"
                :accept="accept"
                :format="uploadFormat"
                :max-size="maxSize"
                name="files"
                :show-upload-list="false"
                :on-success="imageUploadSuccessHandle"
                :on-format-error="imageUploadFormatError"
                :on-exceeded-size="imageUploadExceededSize"
                :before-upload="imageUploadBeforeUpload"
                :on-error="imageUploadErrorHandle">
          <div style="padding: 50px 0">
            <p>支持上传文件：{{uploadFormat.toString()}}</p>
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽文件到这里上传</p>
          </div>
          <Spin fix v-if="uploadLoading">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>上传中...</div>
          </Spin>
        </Upload>

      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="primary" @click="completeUpload">完成</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "UploadResourceModal",
  data() {
    return {
      visible: false,
      token: localStorage.getItem('token'),
      currentUser: JSON.parse(localStorage.getItem('current_user')),
      uploadAction: window.g.AXIOS_BASE_URL + '/resource/uploadFiles',
      uploadLoading: false,
      maxSize: 5120,
      accept: '.png,.jpg,.jpeg,.webp,.svg,.gif,.tif,.bmp,.hrd',
      formData: {
        groupId: ''
      },
      resourceGroupList: [],
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.visible = true
      this.$PnApi.ResourceApi.getMyAllPnResourceGroup().then(result => {
        this.resourceGroupList = result.data.payload
      })
    },

    completeUpload() {
      this.visible = false
      this.$refs.uploadForm.resetFields()
      this.$refs.upload.clearFiles()
      this.$emit('completeUpload')
    },

    /**
     * 文件上传成功
     * @param res
     */
    imageUploadSuccessHandle(res) {
      this.uploadLoading = false;
      if (res.success) {
        this.$Message.success(res.message)
      } else {
        this.$Message.warning({
          duration: 5,
          content: res.message
        })
      }
    },

    /**
     * 上传文件格式错误
     */
    imageUploadFormatError() {
      this.uploadLoading = false;
      this.$Message.warning({
        duration: 5,
        content: '上传文件格式错误，只支持（.jpg, .jpeg, .png, .gif, .svg）格式的图片文件'
      })
    },

    /**
     * 上传文件大小超出限制
     */
    imageUploadExceededSize(file) {
      this.uploadLoading = false;
      this.$Message.warning({
        duration: 5,
        content: '文件【' + file.name + '】大小超出限制，单个文件不能超过5MB'
      })
    },

    /**
     * 上传文件之前
     */
    imageUploadBeforeUpload() {
      this.uploadLoading = true
    },

    /**
     * 文件上传失败时
     * @param error
     * @param file
     * @param fileList
     */
    imageUploadErrorHandle(error, file, fileList) {
      this.uploadLoading = false;
    }
  },
  computed: {
    uploadFormat() {
      let arr = this.accept.split(',')
      return arr.map((o)=>{return o.replace('.','')})
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>
